<template>
	<view class="content">
		<!-- 轮播区 -->
		<view class="swiper-area w-full">
			<swiper class="h-full" indicator-dots circular="true" duration="400" :current="swiperIdx"
				@change="swiperChange">
				<swiper-item v-if="goods.video && goods.video.url" class="dflex-c">
					<!-- #ifdef APP -->
					<view class="wh-full pos-r" @click="toVideo">
						<image :src="goods.video.poster" class="wh-full" lazy-load mode="aspectFill"></image>
						<image class="bofang pos-a pos-tl-c" src="/static/images/common/bofang.svg">
						</image>
					</view>
					<!-- #endif -->

					<!-- #ifndef APP -->
					<view class="wh-full pos-r dflex-c" style="background: #000;" @click="toVideo">
						<video id="uVideo" :src="goods.video.url" :poster="goods.video.poster"
							:poster-for-crawler="goods.video.poster" :show-fullscreen-btn="false" :controls="false"
							:show-play-btn="false" :show-center-play-btn="false" :enable-progress-gesture="false"
							@ended="goods.video.pause = true" object-fit="cover" class="h-full"
							style="width: 100%;"></video>

						<image v-if="goods.video.pause" class="bofang pos-a pos-tl-c"
							src="/static/images/common/bofang.svg"></image>

					</view>
					<!-- #endif -->
				</swiper-item>
				<swiper-item v-for="(item, idx) in swiperDatas" :key="idx">
					<view class="wh-full">
						<image :src="item" class="wh-full" lazy-load mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<nx-video v-model="videoShow" :videoObj="goods.video" @exit="videoShow = false;"></nx-video>
	</view>
	<view style="    width: 95%;
    margin: 9px 10px;
    border-radius: 39px;">
		<fui-panel :panelData="panelData" :marginTop="24" :size="32"></fui-panel>
	</view>
	<view style="height: 100vh;"></view>
	<view class="uni-container">
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="customButtonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>

	</view>
	

</template>

<script>
	export default {

		data() {
			return {
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
						color: '#fff'
					}
				],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
				isapp: false,
				swiperIdx: 0,
				panelData: {

					list: [{
						title: '￥178',
						desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。',
						source: '开源中国',
						time: '2021-08-09'
					}]
				},
				// 商品数据
				goods: {
					video: {
						url: "https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/50c7fbb5-77ad-45cd-8944-aed805d7e2e1.mp4",
						poster: 'https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/f583325d-730a-4863-a03f-651f9a97ddb2.png',
						pause: true
					}
				},
				swiperDatas: [
					'https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/f583325d-730a-4863-a03f-651f9a97ddb2.png',
					'https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/de4dbe3c-f0f7-4c5b-aeb6-bbe65bdd7674.jpg'
				],
				videoShow: false
			}
		},
		onLoad() {

		},
		onShow(options) {
			// #ifdef APP || APP-NVUE
			this.isapp = true;
			// #endif
		},
		methods: {
			toVideo() {
				// #ifdef APP
				this.videoShow = true;
				return;
				// #endif
				if (!this.uVideo) this.uVideo = uni.createVideoContext('uVideo', this);
				if (this.uVideo.isplay) {
					this.uVideo.pause();
					this.uVideo.isplay = false;
					this.goods.video.pause = true;
					return;
				}
				this.uVideo.isplay = true;
				this.goods.video.pause = false;
				// this.goods.video.loaded = true;
				this.uVideo.play();
			},
			swiperChange(res) {
				if (res.detail && res.detail.current !== 0 && this.uVideo) {
					this.uVideo.pause();
					this.uVideo.isplay = false;
					this.goods.video.pause = true;
				}
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			}

		}
	}
</script>

<style lang="scss">
	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	page {
		background-color: #f6f6f6;
	}

	/* 轮播区 */
	.swiper-area {
		height: 40vh;
		z-index: 0;
	}

	.dflex-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bofang {
		width: 50px;
		height: 50px;
	}

	.pos-r {
		position: relative;
	}

	.pos-a {
		position: absolute;
	}

	.pos-tl-c {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 宽高 */
	/* #ifdef APP-NVUE */
	.w-full {
		flex: 1;
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	.wh-full {
		width: 100%;
		height: 100%;
	}

	.w-full {
		width: 100%;
	}

	/* #endif */

	.h-full {
		height: 100%;
	}
</style>